<template>
	<view>
		<view id="map" class="map">
			<view id="map-earth" class="map-earth"></view>
			<view class="map-grid"></view>
			<view class="map-light"></view>
			<view id="map-chart" class="map-chart"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "mymap",
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
	@earth-size: 800upx;

	.map {
		height: 1300upx;
		width: 100%;
		// height: @earth-size;
		// width: @earth-size;
		// border: solid 1px lightgray;

		position: relative;

		.map-earth {
			height: @earth-size;
			width: @earth-size;
			background: url(../static/images/map-earth.png);
			background-size: 100% 100%;
			// border: solid 1px red;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.map-grid {
			height: @earth-size * 1.3;
			width: @earth-size * 1.3;
			background: url(../static/images/lbx.png);
			background-size: 100% 100%;
			// border: solid 1px red;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			animation: map-grid-rotate 20s linear infinite;
		}

		@keyframes map-grid-rotate {
			from {
				transform: translate(-50%, -50%) rotate(0deg);
			}

			to {
				transform: translate(-50%, -50%) rotate(360deg);
			}
		}

		.map-light {
			height: @earth-size * 1;
			width: @earth-size * 1;
			background: url(../static/images/jt.png);
			background-size: 100% 100%;
			// border: solid 1px red;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			animation: map-light-rotate 10s linear infinite;
		}

		@keyframes map-light-rotate {
			from {
				transform: translate(-50%, -50%) rotate(360deg);
			}

			to {
				transform: translate(-50%, -50%) rotate(0deg);
			}
		}

		position: relative;

		.map-chart {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 1620upx;
		}
	}
</style>